<template>
  <div>
    <headTop></headTop>
    <el-card class="product-center">
      <h4>基本信息</h4>

      <el-form
        ref="form"
        :rules="Rules"
        :model="form"
        label-width="100px"
        style="margin-top:20px;"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入员工姓名"></el-input>
        </el-form-item>
        <el-form-item label="职务" prop="productNo">
          <el-input v-model="form.job" placeholder="请选择员工职务"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="price">
          <el-input
            v-model="form.phone"
            placeholder="请输入员工手机号"
          ></el-input>
        </el-form-item>

        <el-form-item label="籍贯" prop="weight">
          <el-input v-model="form.home" placeholder="请输入籍贯"></el-input>
        </el-form-item>

        <el-form-item label="住址">
          <el-input v-model="form.address" placeholder="请输入住址"></el-input>
        </el-form-item>

        <el-form-item label="基本工资" prop="weight">
          <el-input v-model="form.salary" placeholder="请输入基本工资"></el-input>
        </el-form-item>
        <el-form-item label="入职时间">
          <el-date-picker
            v-model="form.hiredate"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch
            v-model="form.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            on-value="1"
            off-value="0"
            @change="changeSwitch(form.status)"
          >
            >
          </el-switch>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit('form')"
            style="width:200px;"
            >添加员工</el-button
          >
        </el-form-item>
        
      </el-form>
    </el-card>
  </div>
</template>

<script>
import headTop from "@/components/headTop";
import { addStaff } from "@/api/staffData";
export default {
  inject: ["reload"],
  data() {
    return {
      form: {
        name: "",
        job: "",
        home: "",
        address: "",
        phone: "",
        hiredate: "",
        salary: "",
        status:true
      },
      Rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        job: [{ required: true, message: "请选择员工职务", trigger: "blur" }],
        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        hiredate: [
          { required: true, message: "请选择入职时间", trigger: "blur" }
        ]
      },
      dialogVisible: false
    };
  },
  components: {
    headTop
  },
  methods: {
    onSubmit(tform) {
      this.$refs[tform].validate(async valid => {
        if (valid) {
          this.addstaffs();
        } else {
          this.$notify.error({
            title: "错误",
            message: "请检查输入是否正确",
            offset: 100
          });
          return false;
        }
      });
    },
    async addstaffs() {
      try {
        let params = this.form;
        const result = await addStaff(params);
        if (result.code == 200) {
          this.$message("添加员工成功");
          this.reload();
        } else {
          throw new Error("获取数据失败");
        }
        // this.getFoods();
      } catch (err) {
        console.log("获取数据失败", err);
      }
    },
    changeSwitch(data){
      console.log(data);
    }
  }
};
</script>

<style lang="less">
.product-center {
  margin: 10px;
  padding: 10px;
  width: 50%;
  border: 1px solid #eee;
  border-radius: 8px;
  .el-form .el-form-item .el-input {
    width: 230px;
  }
}
</style>
